<template>
	<view class="uni-comment-list" :class="{'uni-comment-list-child':(item.fid > 0)}">
		<view class="uni-comment-face"><image :src="item.userpic" mode="widthFix"></image></view>
		<view class="uni-comment-body">
			<view class="uni-comment-top"><text>{{item.username}}</text></view>
			<view class="uni-comment-content">{{item.data}}</view>
			<view class="uni-comment-date">
				<view>{{timeFormat(item.time)}}</view>
				<view class="uni-comment-replay-btn">5回复</view>
			</view>
		</view>
	</view>
</template>

<script>
	import time from '../../common/time.js'
	export default {
		props:{
			item:Object
		},
		methods:{
			timeFormat(s){
				return time.gettime.gettime(s)
			}
		}
	}
</script>

<style lang="stylus">
.uni-comment-list-child
		padding 20rpx !important
		background #F4F4F4
		border-bottom 1rpx solid #EEEEEE
		margin 0 !important
		box-sizing border-box
		margin-left 90rpx !important
		width auto !important
.uni-comment-list
	flex-wrap nowrap
	padding 10rpx 0
	margin 10rpx 0
	width 100%
	display flex
	.uni-comment-face
		width 70rpx
		height 70rpx
		border-radius 100%
		margin-right 20rpx
		flex-shrink 0
		overflow hidden
		image
			width 100%
			border-radius 100%
	.uni-comment-body
		width 100%
		.uni-comment-top
			line-height 1.5em
			justify-content space-between
			text
				color #0A98D5
				font-size 24rpx
		.uni-comment-content
			line-height 1.6em
			font-size 28rpx
			padding 8rpx 0
		.uni-comment-date
			line-height 38rpx
			flex-direction row
			justify-content space-between
			display flex !important
			flex-grow 1
			view
				color #666666
				font-size 24rpx
				line-height 38rpx
			.uni-comment-replay-btn
				background #FFFFFF
				font-size 24rpx
				line-height 28rpx
				padding 5rpx 20rpx
				border-radius 30rpx
				color #333 !important
				margin 0 10rpx
</style>
